<template>
	<view>
		<!-- 状态栏 -->
		<!-- <TnSticky> -->
		<myLoading v-if="isLoading"></myLoading>


		<view v-else style="background-color: #fdddce;" :style="'height:' + statusBarHeight + 'px;'" </view>

			<scroll-view scroll-y="true" class="scroll-Y" @scroll="scrollfn" style="height: 100vh;">


				<!-- 			<view class="zhanwe" :style="'height:' + (statusBarHeight + 40) + 'px;'"></view> -->


				<view style="position: relative;">
					<image :style="'margin-top:' + (-statusBarHeight) + 'px;'" style="width: 100%;"
						src="../../static/51.jpg" mode="widthFix"></image>


					<view :style="'margin-top:' + (-statusBarHeight) + 'px;'"
						style="position: absolute;top:111rpx;left: 0;width: 400rpx;height: 110px;display: flex;"
						@click="goUserInfo">


						<view style="width:130rpx;height: 130rpx;background-color: rgba(255, 255, 255, 0.8);
				border-radius: 100%;margin-left: 40rpx;margin-top: 63rpx;">
							<image style="width: 130rpx;height: 130rpx;border-radius: 100%;" :src="formData.avatar">

							</image>
						</view>

						<view
							style="width: 150rpx;height: 60rpx;background-color: #e3f5f7;margin-left: 8rpx;margin-top: 55rpx;display: flex;justify-content: center;align-items: center;font-size: 45rpx;font-weight: 700;">
							{{ formData.name }}
						</view>

					</view>

					<view @click="goBack"
						style="position: absolute;left: 20rpx;top: 27rpx;width: 120rpx;height: 80rpx;">

					</view>


					<view @click="goshehzi"
						style="position: absolute;right: 20rpx;top: 20rpx;width: 120rpx;height: 80rpx;">

					</view>



					<view @click="goxingcheng"
						style="position: absolute;left:40rpx;top: 340rpx;width: 120rpx;height: 160rpx;">

					</view>



					<view @click="goqianbao"
						style="position: absolute;left:260rpx;top: 340rpx;width: 120rpx;height: 160rpx;">

					</view>


					<view @click="navigateToloading"
						style="position: absolute;left:440rpx;top: 340rpx;width: 120rpx;height: 160rpx;">

					</view>


					<view @click="gozizhi"
						style="position: absolute;left:610rpx;top: 340rpx;width: 120rpx;height: 160rpx;">

					</view>


				</view>

			</scroll-view>

		</view>
</template>

<script>
export default {
	data() {
		return {
			// 可以在这里添加数据
			colorStartOpacity: 0,
			colorEndOpacity: 0,
			topElement: null,
			statusBarHeight: 0,
			// 本地缓存数据
			userName: '兆铭瑞',
			userAvatar: 'https://picsum.photos/130/130',
			notificationEnabled: false,
			themeMode: 'light',
			formData: {
				name: '',
				phone: '',
				idCard: '',
				firstReceiveDate: '',
				avatar: ''
			},
			isLoading: true

		}
	},
	created() {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
		// 获取本地缓存数据
		this.getUserInfoFromCache()
	},
	onLoad() {
		// 定义一个0.3-1的随机数
		let randomNum = Math.random() * 0.7 + 0.3;
		// 转换为毫秒
		let randomDelay = randomNum * 1000;
		// 延迟执行
		setTimeout(() => {
			setTimeout(() => {
				this.isLoading = false
			}, randomDelay)
		})
	},
	onShow() {
		// 页面加载时，尝试从本地缓存获取数据
		this.loadUserData();
	},
	mounted() {
		nextTick(() => {
			// 确保组件渲染完成后再获取元素
			this.topElement = document.querySelector('.topbox')
		})
	},
	methods: {
		goBack(){
			uni.navigateBack();
		},
		goxingcheng() {
			uni.navigateTo({
				url: '/pages/xingcheng/xingcheng',
			})
		},
		gozizhi() {
			uni.navigateTo({
				url: '/pages/zizhi/zizhi',
			})
		},
		// 从本地缓存加载数据
		loadUserData() {
			try {
				const userData = uni.getStorageSync('userInfo');
				if (userData) {
					const parsedData = JSON.parse(userData);
					this.formData = parsedData;
					console.log('成功加载本地存储的数据:', parsedData);
				}
			} catch (error) {
				console.error('加载本地存储数据失败:', error);
			}
		},
		navigateToloading() {

			uni.navigateTo({
				url: '/pages/loading/loading'
			})

		},
		goqianbao() {
			uni.navigateTo({
				url: '/pages/qianbao/qianbao'
			})
		},
		getUserInfoFromCache() {
			// 尝试获取用户信息缓存
			const userInfo = uni.getStorageSync('userInfo')
			if (userInfo) {
				this.userName = userInfo.userName || '兆铭瑞'
				this.userAvatar = userInfo.userAvatar || 'https://picsum.photos/130/130'
			}
			// 尝试获取设置缓存
			const settings = uni.getStorageSync('settings')
			if (settings) {
				this.notificationEnabled = settings.notificationEnabled || false
				this.themeMode = settings.themeMode || 'light'
			}
		},
		goBack() {
			uni.navigateBack({
				delta: 1,
			})
		},
		goUserInfo() {
			uni.navigateTo({
				url: '/pages/userInfo/userInfo',
			})
		},
		goshehzi() {
			uni.navigateTo({
				// url: '/pages/shezhi/shezhi',
				url: '/pages/xitong/xitong',
			})
		},
		scrollfn(e) {
			const scrollTop = e.detail.scrollTop
			// 设置一个滚动阈值，超过这个值后背景完全变为白色
			const threshold = 100
			// 计算透明度，从0.8到1变化
			// 渐变导航栏初始透明度
			const colorStart = 0
			const colorEnd = 0
			const $headerHeight = 150

			// 第一个渐变色透明度变化
			let colorStartChange = 1 - (1 - colorStart) / $headerHeight * ($headerHeight - scrollTop)
			if (colorStartChange > 1) {
				colorStartChange = 1
			}

			// 第二个渐变色透明度变化
			let colorEndChange = 1 - (1 - colorEnd) / $headerHeight * ($headerHeight - scrollTop)
			if (colorEndChange > 1) {
				colorEndChange = 1
			}

			this.colorStartOpacity = colorStartChange
			this.colorEndOpacity = colorEndChange

			console.log(colorStartChange, colorEndChange)
			try {
				// #ifdef APP
				// topRef.value.style.backgroundImage = `linear-gradient(to bottom,rgba(78, 91, 120,${colorStartChange}),rgba(78, 91, 120,${colorEndChange}))`
				// this.$refs.topRef.style.backgroundImage = `linear-gradient(to bottom,rgba(78, 91, 120,${colorStartChange}),rgba(78, 91, 120,${colorEndChange}))`
				// this.$refs.topRef.style.backgroundColor = `red`
				// #endif
				// #ifdef H5
				// 使用原生DOM选择器获取元素，更可靠
				const currentTopElement = document.querySelector('.topbox')
				currentTopElement.style.backgroundImage = `linear-gradient(to bottom,rgba(78, 91, 120,${colorStartChange}),rgba(78, 91, 120,${colorEndChange}))`

				// 使用更简单的背景设置方式，避免复杂的渐变计算
				// currentTopElement.style.background = `rgba(255, 255, 255, ${opacity})`
				// currentTopElement.style.backgroundImage = 'none'
				// currentTopElement.style.cssText += ';background: rgba(255, 255, 255, ' + opacity + ') !important; background-image: none !important;'
				// #endif
			} catch (error) {
				console.error('设置背景样式时出错:', error)
			}
		}
	}
}
</script>

<style scoped>
.zhanwe {
	background-image: linear-gradient(to bottom, rgba(255, 223, 202, 0.8), rgba(243, 234, 225, 0));
}

.topbox {

	background-color: transparent;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}
</style>
